import { useState } from 'react'
import { useImmer } from 'use-immer'

interface User {
    name: string;
    age: number;
    email: string;
    address: {
        city: string;
        province: string;
    }
}

export function SetSetState () {

    const [ { name, age, email, address: { city, province } }, updateUser ] = useImmer<User>({
        name: '张三',
        age: 18,
        email: '123@qq.com',
        address: {
            province: '上海',
            city: '浦东'
        }
    })

    return (
        <div className={ 'p-20 bg-rose-400' }>
            <p>{ name }</p>
            <p>{ age }</p>
            <p>{ email }</p>
            <p>{ province }</p>
            <p>{ city }</p>
            <button className={ 'py-3 px-5 bg-purple-400' }
                    onClick={ () => updateUser( user => {
                        user.address.city = '黄埔'
                    })}>
                click
            </button>
        </div>
    )
}
